<template>
  <div>
    <h1 class="text-lg">首页</h1>
    <!-- 分页器 -->
    <div class="w-full my-5">
      <el-scrollbar>
        <els-pagination
          :total="1000"
          :currentChang="currentChange"
          :pageSize="pageSize"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange"
        />
      </el-scrollbar>
    </div>

    <!-- ElsDialog -->
    <div class="w-full my-5">
      <el-button type="primary" @click="elsDialogVisible = true">ElsDialog</el-button>
      <els-dialog v-model="elsDialogVisible">
        ElsDialog

        <template #footer>
          <el-button type="primary" @click="elsDialogVisible = false">确定</el-button>
          <el-button @click="elsDialogVisible = false">取消</el-button>
        </template>
      </els-dialog>
    </div>

    <!-- 单文件上传 -->
    <div class="w-full my-5">
      <single-upload :handleUpload="handleSingleUpload" />
    </div>

    <!-- 多文件上传 -->
    <div class="w-full my-5">
      <multiple-upload :handleUpload="handleMultipleUpload" :limit="5" />
    </div>
  </div>
</template>

<script name="Home" lang="ts" setup>
// 分页器
const pageSize = ref<number>(10);
const currentChange = ref<number>(1);
const handleSizeChange = (val: number): void => {
  console.log('handleSizeChange: ', val);
};
const handleCurrentChange = (val: number): void => {
  console.log('handleCurrentChange: ', val);
};

// ElsDialog
const elsDialogVisible = ref(false);

// 单文件上传
const handleSingleUpload = (file: File): void => {
  console.log('handleSingleUpload: ', file);
};

// 多文件上传
const handleMultipleUpload = (files: File[]): void => {
  console.log('handleMultipleUpload: ', files);
};
</script>
